微信小程序API上

#微信小程序API上| 来源: 网络整理| 查看: 265

1.前导知识（1）wx.switchTab（只能跳转到tabBar页面，并关闭其他所有非tabBar页面）（2）wx.navigateTo（跳转到应用内的某个页面，且保留当前页面）（3）wx.redirectTo（跳转到应用内的某个页面，且关闭当前页面）（4）wx. reLaunch（关闭所有页面，打开到应用内的某个页面。既能跳转到标签页，又能跳转到非标签页）（5）wx.chooseImage() 从本地相册选择图片或使用相机拍照（6）wx.chooseAddress()调起用户编辑收货地址原生界面（7）wx.makePhoneCall()调起用户通讯录，拨打电话导入image文件夹 index.wxml

欢迎来到我的个人页昵称：5秒钟的记忆星座：天秤座兴趣：看书、旅游 QQ：243233**** 电话：152****1605

index.wxss

/* pages/index/index.wxss */ .nav { display: flex; align-items: center; flex-direction: column; } .welcome { font-size: 50rpx; color: #f7982a; margin: 40rpx 0; } .nav > image { width: 300rpx; height: 300rpx; border-radius: 50%; } .content { font-size: 32rpx; width: 400rpx; margin: 50rpx auto; } .content > view { text-align: left; padding: 10rpx 0; color: #f7982a; } // pages/index/index.js Page({ changeImage: function(e) { // 第1种方式：只能跳转到tabBar页面 wx.switchTab({ url: '/pages/person/person' }) // 第2种方式：可以跳转到tabBar或者非tabBar页面 // wx.reLaunch({ // url: '/pages/person/person' // }) } })

2.实现底部标签页切换在“首页”中单击头像上方提示语“点我跳转”，进入到 “个人中心页面”；新建个人中心页面person app.json

{ "pages": [ "pages/index/index", "pages/person/person" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#f7982a", "navigationBarTitleText": "个人中心", "navigationBarTextStyle": "white" }, "tabBar": { "color": "#333", "selectedColor": "#f7982a", "backgroundColor": "#f6f6f6", "borderStyle": "white", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/home.png", "selectedIconPath": "images/home_select.png" }, { "pagePath": "pages/person/person", "text": "个人中心", "iconPath": "images/me.png", "selectedIconPath": "images/me_select.png" } ] }, "sitemapLocation": "sitemap.json" }

这两个页面都属于tabBar页面，所以使用wx.swichTab或者wx.reLaunch方式。（1）在app.js文件，配置tabBar （2）在index.wxml文件，为头像绑定changeImage()函数（3）在index.js文件，编写changeImage()函数

// 第一种方式：只能跳转到tabbar 页面 wx.switchTab({ url: '/pages/person/person‘ }) // 第二种方式：可以跳转到tabbar或者非tabbar页面 wx.reLaunch({ url: '/pages/person/person‘ })

3.编辑个人资料（1）进入详情页 person.wxml

个人资料

person.js

info: function(e) { // 第一种方式：保留当前页面，点击页面左上角箭头，返回上一个页面 wx.navigateTo({ url: '../detail/detail'}) // 第二种方式：关闭当前页，左上角没有返回箭头，不能返回上一个页面 wx.redirectTo({ url: '/pages/detail/detail', }) }

（2）上传头像 detail.wxml

detail.js

data: { imgUrl: "/images/avatar.jpg" }, changeAvatar: function() { wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: res => { // tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths this.setData({ imgUrl: tempFilePaths }) } }) },

（3）进入修改资料详情页单击“修改资料按钮” detail.wxml

修改资料

detail.js

data: { gender: '女', username: 'xiaoyuer', imgUrl: "/images/avatar.jpg" }, jump: function(e) { wx.navigateTo({ url: '/pages/modify/modify?username=' + encodeURIComponent(this.data.username) + '&gender=' + encodeURIComponent(this.data.gender) }) }

（4）进入个人资料修改页提交表单 modify.wxml

姓名：性别：男女保存

modify.js

data: { username: '', gender: '男' }, onLoad: function(options) { this.setData({ // 收到数据后使用decodeURIComponent()解码 username: decodeURIComponent(options.username), gender: decodeURIComponent(options.gender) }) }, formSubmit: function(e) { ……获取表单数据formData、当前页面栈pages、获取上一个页面对象prevPage prevPage.setData({ // 把数据存到上一个页面中 }) wx.navigateBack() // 返回到上一个页面 }

4.订单物流查询（1）在本任务中，将会实现订单物流查询功能，在“个人中心”页单击“订单物流查询”跳转到 pages/order/order“订单查询”页面。功能需求如下：选择快递公司。输入运单号。单击查询按钮，在页面下方展示物流信息。（2） person.wxml

订单物流查询

person.js

order: function(e) { // 保留当前页面，跳转到应用内的订单查询页面 wx.redirectTo({ url: '/pages/order/order', }) }

order.wxml

查询

order.js

// pages/order/order.js Page({ data: { no: null, // 运单号 company: ['sf', 'sto', 'yt', 'yd', 'tt'], // 传递给快递查询接口的值 com: ['顺丰', '申通', '圆通', '韵达', '天天'], // 用于显示在页面中的快递名称 index: 0, // 用户选择的快递公司的数组索引 expressInfo: null, // 查询到的物流信息 }, search: function() { wx.showLoading({ title: '加载中', }) // 在 https://www.juhe.cn/docs/api/id/43 注册后可申请数据，将获得的接口填入url // key值在个人中心-我的数据，可获取AppKey var key = '' wx.request({ url: 'http://v.juhe.cn/exp/index?key=' + key + '&com=' + this.data.company[this.data.index] + '&no=' + this.data.no, method: 'GET', header: { 'content-type': 'application/json' // 默认值 }, success: res => { console.log(res.data); this.setData({ expressInfo: res.data }) wx.hideLoading() } }) }, // 获取运单号的值 noInput: function(e) { this.setData({ no: e.detail.value }) }, // 获取快递公司的索引 companyInput: function(e) { this.setData({ index: e.detail.value }) } })

5.选择收货地址在本任务中，将会实现选择收货地址功能，在“个人中心”页单击“选择收货地址”跳转到 pages/address/address “收货地址”页面。功能需求如下：单击“获取收货地址”按钮，进行地址选择。在收货地址表单中会渲染数据。 person.wxml

选择收货地址

person.js

address: function(e) { // 保留当前页面，跳转到应用内的选择收货地址页面 wx.redirectTo({ url: '../address/address' }) }

address.wxml

{{ addressInfo.userName }} {{ addressInfo.postalCode }} {{ addressInfo.provinceName }} {{ addressInfo.cityName }} {{ addressInfo.countyName }} …… 表单数据

6.客服联系电话在本任务中，将会实现拨打电话功能。功能需求如下：在“个人中心”页单击“客服联系方式”。绑定拨打电话事件。调用拨打电话API（wx.makePhoneCall）。 person.wxml

客服联系方式

person.js

contact: function(e) { // 调用拨打电话API wx.makePhoneCall({ phoneNumber: '***' // 该电话号码为模拟数据 }) }

【本文地址】

微信小程序API上

微信小程序API上

今日新闻

推荐新闻